WD PLUS 2020-11 (dashboard)

Na koniec modułu czas na obiecaną powtórkę z OOP. Póki co, całą naszą aplikację budowaliśmy w bardzo prosty sposób, dodając po prostu kolejne funkcje. Im jednak ich więcej, tym mniej czytelny staje się kod. Pamiętasz, jak ciężko nawigowało się po aplikacji bloga, gdy ta się rozwinęła? Spójrz tylko na to, jak w tej chwili wygląda script.js. A gdyby doszły kolejne funkcjonalności, byłoby tylko gorzej... Wiesz już jednak, że w takich sytuacjach jest proste i znane Ci już wyjście – OOP. I właśnie konwersja naszej aplikacji na styl OOP będzie Twoim zadaniem.

Co mamy przez to na myśli? Przede wszystkim cała logika aplikacji będzie "schowana" w klasie BooksList, a wszystkie referencje do DOM-u, tablice, funkcje itd. powinny być częścią klasy – w formie właściwości (np. tablice) albo metod (funkcje). Poza ciałem klasy ma znaleźć się tylko jedna linijka kodu, która po prostu utworzy jedną instancję na niej opartą.

class BooksList {
  ...
}

const app = new BooksList();

W pracy nad klasą staraj trzymać się pomysłów, które wykorzystaliśmy już wcześniej w pizzerii. Np. referencje do elementów DOM warto przechowywać we właściwościach this, a za ich nadanie może odpowiadać metoda o nazwie getElements.

Jeśli przez dłuższy czas będziesz mieć problem z rozpoczęciem zadania, to poniżej przedstawiamy propozycję podziału klasy na metody. Użyj jej jednak tylko wtedy, jeśli naprawdę się zatniesz.

Pokaż wskazówkę Ukryj wskazówkę

class BooksList {
  constructor() {
    ...
  }

  initData() {
    this.data = dataSource.books;
  }

  getElements() {
    ...
  }

  initActions() {
    ...
  }

  filterBooks() {
    ...
  }

  determineRatingBgc() {
    ...
  }

}

const app = new BooksList();